<script setup>
import { ref, onMounted, inject } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { BREADCRUMBS } from "@/plugins/global";
import JsonEditorVue from "json-editor-vue3"

const axios = inject("axios"), route = useRoute(), router = useRouter();

// ---- 初始化。
const appCode = route.params.appCode;
onMounted(() => {
  if (appCode) {
    BREADCRUMBS.splice(0, BREADCRUMBS.length,
      { "label": "应用列表", "path": "/home/app_list" },
      { "label": "应用更新", "path": `/home/app_upsert/${appCode}` }
    );
    appGet();
  } else {
    BREADCRUMBS.splice(0, BREADCRUMBS.length,
      { "label": "应用列表", "path": "/home/app_list" },
      { "label": "应用插入", "path": "/home/app_upsert" }
    );
  }
});

// ---- 应用获取。
const app = ref({
  "appCode": null,
  "name": null,
  // ---- 设置用户的默认登录上限。 
  "config": null,
  "insert": false
});
const appGet = () => {
  axios.get(`/api/cms-web/app/get/cache?appCode=${appCode}`).then(response => {
    const data = response.data.data;
    if (response.data.success) {
      app.value = data;
    } else {
      ElMessage.error(response.data.message);
    }
  });
}

// ---- 应用插入/更新准备。
const appUpsertFlag = ref(false);
const appUpsertPrepare = () => {
  if (appCode) {
    appUpsertFlag.value = true;
    app.value.insert = false;
  } else {
    app.value.config = { "staffLoginLimit": 1, "customerLoginLimit": 5 };
    app.value.insert = true;
  }
}

// ---- 应用插入/更新确认。
const appFormRef = ref(null), appFormRules = ref({
  "appCode": [{ "required": true, "message": "请输入代码！", "trigger": "blur" }],
  "name": [{ "required": true, "message": "请输入名称！", "trigger": "blur" }]
});
const appUpsertConfirm = () => {
  appFormRef.value.validate((valid) => {
    if (valid) {
      axios.post("/api/cms-web/app/upsert", app.value).then(response => {
        if (response.data.success) {
          if (appCode) {
            ElMessage.success("更新成功！");
            appUpsertFlag.value = false;
          } else {
            ElMessage.success("插入成功！");
            router.push("/home/app_list");
          }
        } else {
          ElMessage.error(response.data.message);
        }
      });
    }
  });
}
</script>

<template>
  <div class="app-upsert-page-div-class">
    <el-form ref="appFormRef" :model="app" :rules="appFormRules" require-asterisk-position="right"
      class="app-upsert-form-class">
      <div class="app-upsert-form-item-div-class">
        <el-form-item label="代码" prop="appCode">
          <el-input v-model="app.appCode" style="width: 220px" disabled autocomplete="off" v-if="appCode" />
          <el-input v-model="app.appCode" style="width: 220px" autocomplete="off" v-else />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="app.name" style="width: 220px" autocomplete="off" />
        </el-form-item>
        <el-button type="primary" @click="appUpsertPrepare()" v-if="appCode">确认</el-button>
        <el-button type="primary" @click="appUpsertConfirm()" v-else>确认</el-button>
      </div>
      <div class="app-upsert-form-item-div-class">
        <!-- @upsert:modelValue="upsertModelValue" -->
        <!-- @validationError="editError" -->
        <json-editor-vue v-model="app.config" language="zh-CN" style="width: 100%; height: 300px;" />
      </div>
    </el-form>
  </div>
  <el-dialog header="确认更新" v-model="appUpsertFlag" width="30%" style="padding: 30px 20px 20px 20px;">
    <div style="padding-bottom: 10px">您确定要更新应用[{{ route.params.appCode }}]吗？请严格审视该行为对程序运行造成的影响！</div>
    <template #footer>
      <span>
        <el-button @click="appUpsertFlag = false">取消</el-button>
        <el-button type="primary" @click="appUpsertConfirm()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.app-upsert-page-div-class {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 20px 20px 20px 20px;
}

.app-upsert-form-class {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  height: 100%;
  padding-top: 10px;
}

.app-upsert-form-item-div-class {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 20px;
}
</style>
